<!--
 * @Description: CFA题库 -- cfa_content
 * @Author: your name
 * @Date: 2023-12-28
 * @LastEditTime: 2023-12-28
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="online_Tutorial heart_w" :class="[{ have_case: change_class }]">
      <div class="test">
        <div class="header">
          <p>Question: {{ p_id + 1 }}</p>
          <div class="center" v-if="model == 1">
            <span>{{ timing }}</span>
          </div>
          <div class="right" v-if="model == 1">
            <el-button plain @click="finish_show = true">
              Finish Test
            </el-button>
            <el-button plain @click="saveShow = true">保存进度</el-button>
          </div>
        </div>
        <div class="centertitle">
          <p>Test: {{ cate_title }}</p>
        </div>

        <!-- 1.做题模式 model-->
        <div class="main" v-if="model == 1">
          <!-- <div v-show="!arrlen">暂时没有题目</div> -->
          <div class="main_left">
            <div class="btns_cont">
              <div
                class="inner_btnbox"
                v-for="(item, index) in case_btns"
                :key="item.id"
                :class="{ not_show_child: item.show_child }"
              >
                <el-button
                  class="test_btn"
                  size="mini"
                  :class="[
                    { have: item.have_case },
                    { answered: item.user_answer },
                    { active: item.position == p_id }
                  ]"
                  @click="tabs(item, index)"
                >
                  {{ index + 1 }}
                </el-button>
                <div class="inner_btns" v-show="!item.show_child">
                  <el-button
                    size="mini"
                    v-for="(it, i) in item.list"
                    :key="it.id"
                    @click="inner_tab(it, i)"
                    :class="[
                      { active: it.position == p_id },
                      { answered: it.user_answer }
                    ]"
                  >
                    {{ index + 1 }}.{{ i + 1 }}
                  </el-button>
                </div>
              </div>
            </div>
          </div>

          <div class="rightbor">
            <div
              class="main_right"
              v-for="(item, index) in topicarr"
              :key="item.id"
              v-show="p_id == index"
            >
              <div class="ques_list">
                <div class="ques_title" id="qstitle">
                  <div class="htbox" id="ques_text" v-html="item.title"></div>
                </div>
                <!-- 单选题/多选 -->
                <div class="options" v-if="!false">
                  <label
                    for="sel_option"
                    v-for="(item_set, index) in item.op"
                    :key="item_set.id"
                    :class="{ line: item_set.user_del == index }"
                    class="option_item"
                    @click.left="
                      select_topic(item, item_set, index, item.position)
                    "
                  >
                    <span>{{ letterarr[index] }}</span>
                    <div
                      class="option_contain"
                      :class="{ choosed: item.user_index == index }"
                    >
                      <div
                        class="option_contain_main"
                        style="user-select: none"
                      >
                        {{ item_set.name }}
                      </div>
                    </div>
                  </label>
                </div>

                <!-- 文本题 -->
                <div class="editor_box" v-if="item.t_type == 4">
                  <quill-editor
                    v-model="item.user_answer"
                    @change="editor_change(item)"
                    class="editor"
                    ref="myTextEditor"
                    :options="editorOption"
                  >
                  </quill-editor>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 2. 背题模式 -->
        <div class="main" v-if="model == 0">
          <div class="main_left">
            <div class="btns_cont">
              <div
                class="inner_btnbox"
                v-for="(item, index) in itemobj"
                :key="index"
              >
                <el-button
                  size="mini"
                  class="test_btn"
                  @click="tabs(item, index)"
                >
                  {{ index + 1 }}
                  <i
                    :class="[{ 'el-icon-arrow-up': true }, { up_t: true }]"
                    v-if="item.is_flag"
                  >
                  </i>
                </el-button>
                <div class="inner_btns" v-if="have_case">
                  <el-button
                    size="mini"
                    v-for="(it, i) in item.list"
                    :key="i"
                    @click="inner_tab(it, i)"
                  >
                    {{ i + 1 }}.{{ index + 1 }}
                  </el-button>
                </div>
              </div>
            </div>
          </div>
          <div class="rightbor">
            <div class="main_right">
              <!-- v-for="(item, index) in test_case"
              :key="index"
              v-show="p_id == index" -->
              <div class="ques_list">
                <div class="ques_title" id="qstitle">
                  <div class="htbox" id="ques_text">v-html="item.title"</div>
                </div>
                <div class="options">
                  <label
                    for=""
                    v-for="(items, indexs) in 4"
                    class="option_item"
                    :key="indexs + 'i'"
                  >
                    <span>{{ letterarr[indexs] }}</span>
                    <div class="option_contain" :class="{ choosed: items[0] }">
                      <div
                        class="option_contain_main"
                        style="user-select: none"
                      >
                        items.name
                      </div>
                    </div>
                  </label>
                </div>

                <!-- 文本题 -->
                <div class="editor_box" v-if="false">
                  <quill-editor
                    v-model="user_answer"
                    class="editor"
                    ref="myTextEditor"
                    :options="editorOption"
                  >
                  </quill-editor>
                </div>

                <div class="analysisBox">
                  <p>答案解析:</p>
                  <div class="ana_info" v-html="analysis"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="footer">
          <div class="left">
            <el-button
              type="success"
              size="medium"
              @click="correct_err_show = true"
            >
              纠错
            </el-button>
            <el-button
              type="success"
              size="medium"
              @click="addNote_show = true"
            >
              笔记
            </el-button>
            <el-button type="success" size="medium" @click="wd_show = true">
              答疑
            </el-button>
          </div>

          <div class="right_t">
            <el-button type="success" size="medium" @click="collect">
              {{ topicarr[p_id]?.is_collection ? '已收藏' : '收藏' }}
            </el-button>
            <el-button
              type="success"
              size="medium"
              icon="el-icon-arrow-left"
              @click="pageback()"
            >
              Back
            </el-button>
            <el-button type="success" size="medium" @click="nextpage()">
              Next
              <i class="el-icon-arrow-right el-icon--right"></i>
            </el-button>
            <el-button type="success" size="medium" @click="BackList">
              BackList
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- case-html -->
    <div class="case_box" :class="{ act: zoom }" v-if="zoom_show">
      <div class="top" :class="{ case_top: zoom }" @mousedown="drag_top">
        <h5>Case Scenario</h5>
        <img src="@/assets/images/fold.png" alt="折叠-展开" @click="zoom_out" />
      </div>
      <div class="main_case_box">
        <div class="inner" v-html="case_info"></div>
      </div>
    </div>

    <!-- 纠错 -->
    <transition name="leftToright">
      <div class="common_dialog jc_dialog" v-if="correct_err_show">
        <div class="inner_con">
          <div class="title">
            纠错
            <div class="close" @click="close_err"></div>
          </div>
          <div class="body">
            <p class="t_title">
              CFALevel II“甄”题库Economics(2024N) LM1 Currency Exchange Rates:
              Understanding Equilibrium Value
            </p>
            <div class="choose_box">
              <el-radio-group v-model="error_form.err_choose">
                <el-radio size="medium" label="0">答案错误</el-radio>
                <el-radio size="medium" label="1">功能问题</el-radio>
                <el-radio size="medium" label="2">错误解析</el-radio>
                <el-radio size="medium" label="3">判分错误</el-radio>
                <el-radio size="medium" label="4">排版错误</el-radio>
                <el-radio size="medium" label="5">其他</el-radio>
              </el-radio-group>
            </div>
            <textarea
              placeholder="感谢您的意见和体验感受，我们一定会快速解决您的..."
              class="jc_input"
              v-model="error_form.correct_info"
            >
            </textarea>
            <div class="concat">
              联系方式：
              <input
                placeholder="您的手机号"
                type="text"
                v-model="error_form.your_phone"
              />
            </div>
          </div>
          <div class="btm_btn">
            <button class="cancel" @click="close_err">取消</button>
            <button class="sure" @click="submit_err()">确定</button>
          </div>
        </div>
      </div>
    </transition>

    <!-- 笔记 -->
    <transition name="leftToright">
      <div class="mask_addNode" v-if="addNote_show">
        <div class="add_box">
          <div class="top">
            <p>title-标题</p>
            <button @click="get_notes(0)">我的笔记</button>
            <button @click="get_notes(1)">全网笔记</button>
          </div>
          <div class="add_info">
            <div class="ipt">
              <span>标题：</span>
              <input placeholder="输入标题" type="text" v-model="note_tit" />
              <p>是否公开：</p>
              <el-switch v-model="is_public"></el-switch>
            </div>
            <div class="ipt">
              <span> 笔记内容: </span>
              <textarea
                name=""
                cols="30"
                rows="10"
                placeholder="请输入笔记内容..."
                id="text_con"
                v-model="note_text"
              >
              </textarea>
            </div>
          </div>
          <div class="upd_box">
            <el-upload
              action="#"
              list-type="picture-card"
              :on-preview="imgPreview"
              :on-remove="handleRemove"
              :http-request="upload_img"
              :limit="3"
              :on-exceed="handleExceed"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
          <div class="btns">
            <!-- <button class="submit_btn" @click="add_note">提交</button> -->
            <button class="submit_btn" @click="close_addNote">关闭</button>
          </div>
        </div>
      </div>
    </transition>
    <!-- 缩略图展示 -->
    <el-dialog :visible.sync="wd_preview_show">
      <img width="100%" :src="wd_preview_img" alt="缩略图" />
    </el-dialog>
    <!-- 笔记列表 -->
    <transition name="leftToright">
      <div class="note_box" v-if="note_show">
        <div class="note_list">
          <div class="top">
            <img
              src="https://www.rongyuejiaoyu.com/static/index/images/head5.jpg"
              alt="头像"
            />
            <button @click="get_notes(0)" v-if="!show_mynote">全网笔记</button>
            <button @click="get_notes(1)" v-else>我的笔记</button>
          </div>
          <div class="count">0条笔记</div>
          <div class="list_item">
            <div class="item" v-for="(item, index) in note_list" :key="index">
              <h5>{{ item.title }}</h5>
              <p>{{ item.content }}</p>
              <div
                style="display: flex; margin-top: 8px"
                v-if="item.note_images"
              >
                <img
                  style="width: 100px; height: 80px; margin-right: 10px"
                  :src="item"
                  alt=""
                  @click="show_big(item)"
                  v-for="(item, index) in item.note_images"
                  :key="index"
                />
              </div>
            </div>
          </div>
          <button class="close_btn" @click="note_show = false">关闭</button>
        </div>
      </div>
    </transition>

    <!-- 答疑 -->
    <transition name="leftToright">
      <div class="common_dialog ans_que" v-if="wd_show">
        <div class="inner_con">
          <div class="title">
            问答
            <div class="close" @click="close_wd"></div>
          </div>
          <div class="row">
            <button class="my_ans" @click="get_ask(1, 0)">我的提问</button>
            <button class="other_ans" @click="get_ask(0, 0)">全部问答</button>
          </div>
          <div class="que_tit">
            <input
              type="text"
              v-model="wd_tit"
              placeholder="请输入需要提问的标题"
            />
          </div>
          <div class="que_info">
            <textarea placeholder="请输入您要提问的内容" v-model="wd_info">
            </textarea>
          </div>
          <div class="upd_box">
            <el-upload
              action="#"
              list-type="picture-card"
              :on-preview="imgPreview"
              :on-remove="handleRemove"
              :http-request="upload_img"
              :limit="3"
              :on-exceed="handleExceed"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
          <div class="btm_btns">
            <button @click="close_wd">取消</button>
            <button @click="submit_wd">保存</button>
          </div>
        </div>
      </div>
    </transition>
    <!-- 问答列表 -->
    <transition name="leftToright">
      <div class="common_dialog ask_box" v-if="ask_show">
        <div class="inner_box">
          <div class="top">
            <img
              src="https://www.rongyuejiaoyu.com/static/index/images/head5.jpg"
              alt="user_ava"
            />
            <!-- <h5 :title="ask_tit">{{ ask_tit }}</h5> -->
            <h5>ask_tit</h5>
            <button @click="ask_show = false">关闭</button>
          </div>
          <div class="tit_div">
            <p class="count">0条提问</p>
            <div class="type">
              <p :class="{ act_type: ask_type == 1 }" @click="get_ask(1, 1)">
                我的
              </p>
              <p :class="{ act_type: ask_type == 0 }" @click="get_ask(0, 1)">
                全部
              </p>
            </div>
          </div>
          <div class="list_item">
            <div class="item" v-for="(e, i) in ask_list" :key="i">
              <div class="top_con">
                <div class="avatar_box"><img :src="e.avatar" alt="" /></div>
                <div class="ana_box">
                  <p class="name">{{ e.username }}</p>
                  <p class="time">{{ e.new_add_time }}</p>
                  <p class="con">{{ e.question_title }}</p>
                </div>
              </div>
              <div class="img_box">
                <img
                  @click="show_big(item)"
                  :src="item"
                  alt=""
                  v-for="(item, index) in e.images"
                  :key="index"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!-- 保存进度 -->
    <transition name="leftToright">
      <div class="mask-save" v-show="saveShow">
        <div class="kuang">
          <img
            src="https://www.rongyuejiaoyu.com/static/static/img/icon-pasue.c3aa006.png"
            alt="进度"
          />
          <p>保存进度，下次继续！</p>
          <div class="stopBtn">
            <div @click="saveRecord">保存</div>
            <div @click="save_hide">取消</div>
          </div>
        </div>
      </div>
    </transition>

    <!-- finish test -->
    <transition name="leftToright">
      <div class="common_dialog finishTest" v-if="finish_show">
        <div class="inner">
          <div class="header">
            <p>Confirm Finish</p>
          </div>
          <div class="main_text">
            <img src="@/assets/images/qm.png" alt="" />
            <p>Are you sure you would like to finish the test?</p>
          </div>
          <div class="btns">
            <button @click="submitTest">
              <img src="@/assets/images/sure.png" alt="" />
              <p>Finish</p>
            </button>
            <button @click="finish_show = false">
              <img src="@/assets/images/error_exit.png" alt="" />
              <p>Cancel</p>
            </button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { get_topic, collection } from '@/api/CFApractice.js'
export default {
  name: 'cfa_content',
  data() {
    return {
      editorOption: {
        placeholder: '请输入...',
        readyOnly: false, //是否只读
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            ['blockquote', 'code-block'], // 引用  代码块
            ['image', 'link'], // 图片 链接
            [{ size: ['small', false, 'large', 'huge'] }] // 字体大小
          ]
        }
      },
      nowposition: 1, //当前题的题号
      saveShow: false,
      finish_show: false,
      test_case: [],
      p_id: 0,
      case_info: {},
      letterarr: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
      model: '', // 1 做题模式 0背题模式
      tid: 0, //当前题目的tid
      content: '',
      ask_list: [], // 问答列表
      ask_type: 1,
      ask_show: false,
      wd_show: false,
      wd_tit: '', // 问答标题
      wd_info: '', // 问答内容
      note_list: [], // 笔记列表
      filelist: [], // 文件上传列表
      wd_preview_show: false, // 控制打开变量
      wd_preview_img: '', // 缩略图文件
      note_text: '', // 笔记内容
      is_public: true, // 添加笔记是否公开
      note_tit: '', // 笔记标题
      error_form: {
        err_choose: '0', // 纠错/复选框
        correct_info: '', // 纠错/文本域
        your_phone: '' // 纠错/ 手机号
      },
      correct_err_show: false,
      addNote_show: false,
      note_show: false,
      show_mynote: false,
      zoom: false, // 控制case题显示位置 改
      zoom_show: false, // 控制case题显示
      change_class: false, // 控制题目显示位置
      seconds: 0,
      testTime: 0,
      timing: '00:00:00',
      Init: null,
      cate_title: '',
      case_btns: [], //左侧按钮数组
      topicarr: [], // 请求返回的题目重组数组
      casearr: [], // 请求返回的case 题目 暂存数组
      textarr: [], // 请求返回的文本题暂存数组 text
      testarr: [] // 请求返回的单选题暂存数组list
    }
  },
  mounted() {
    let divElement = document.querySelector('body > div')
    let elediv = document.querySelector('div > div')
    elediv.style.height = '100%'
    divElement.style.height = '100%'
  },
  created() {
    this.get_practice()
    this.start()
    this.model = localStorage.getItem('model')
    console.log(localStorage.getItem('model'), '参数model')
    if (this.model == 0) {
      clearInterval(this.Init)
    }
  },
  methods: {
    // TODO: cid  //topic
    async get_practice() {
      let _that = this
      const params = {
        token: this.$store.state.token,
        // cid: 10606,
        cid: 10585,
        // cid: 10288,
        type: 1
      }
      const { data: data } = await get_topic(params)

      if (data.code == 1) {
        this.cate_title = data.data.cate.join('  ')
        let new_arr = []
        let test_topic = data.data.list
        let text_topic = data.data.text
        let test_case = data.data.case
        let idx = -1

        // case 题集数据
        for (let i = 0; i < test_case.length; i++) {
          test_case[i].show_child = false
          test_case[i].have_case = true
          let case_text = test_case[i].case_content
          for (let j = 0; j < test_case[i].list.length; j++) {
            idx++
            test_case[i].list[j].t_num = i + 1 + '.' + (j + 1)
            test_case[i].list[j].case_con = case_text
            test_case[i].list[j].position = idx
            test_case[i].list[j].user_index = -1
            test_case[i].list[j].is_true = -1
            test_case[i].list[j].user_answer = ''
            test_case[i].list[j].is_flag = false
            test_case[i].list[j].type = 'case'
            test_case[i].list[j].t_type == 1 ? -1 : 2
            test_case[i].list[j].op = test_case[i].list[j].op.map((ele) => {
              return {
                name: ele,
                user_del: -1
              }
            })
            new_arr[idx] = test_case[i].list[j]
            _that.topicarr.push(new_arr[idx])
          }
        }
        console.log('data.case', _that.topicarr)

        // list题集数据
        let case_len = test_case.length
        let len = new_arr.length
        for (let i = 0; i < test_topic.length; i++) {
          test_topic[i].t_num = case_len + i + 1
          test_topic[i].position = len + i // 从case的数组长度开始计算list 的题目位置 position
          test_topic[i].have_case = false
          test_topic[i].user_index = -1
          test_topic[i].user_answer = '' // 0
          test_topic[i].is_flag = false
          test_topic[i].type = 'test'
          test_topic[i].op = test_topic[i].op.map((ele) => {
            return {
              name: ele,
              user_del: -1
            }
          })
          _that.topicarr.push(test_topic[i])
        }
        console.log('data.list', _that.topicarr)

        // text题集数据
        let big_arr = new_arr.concat(test_topic)
        let lens = big_arr.length
        for (let i = 0; i < text_topic.length; i++) {
          text_topic[i].t_num = lens + i + 1
          text_topic[i].position = lens + i
          text_topic[i].user_answer = ''
          text_topic[i].is_flag = false
          text_topic[i].type = 'text'
          test_topic[i].have_case = false

          _that.topicarr.push(text_topic[i])
        }
        console.log('text_topic', _that.topicarr)

        // 左侧按钮显示数组
        this.case_btns = test_case.concat(test_topic).concat(text_topic)
        console.log('左侧按钮显示数组', this.case_btns)
      } else {
        this.$message.error(data.msg)
      }
    },

    // 拖拽 改
    drag_top(e) {
      console.log('鼠标拖曳事件:', e)
      if (!this.zoom) return
      var odiv = e.target
      let parent_div = odiv.parentNode
      let disx = e.clientX - parent_div.offsetLeft
      let disy = e.clientY - parent_div.offsetTop
      document.onmousemove = (e) => {
        let left = e.clientX - disx
        let top = e.clientY - disy
        // console.log(left, top)
        parent_div.style.left = left + 'px'
        parent_div.style.top = top + 'px'
      }
      document.onmouseup = (e) => {
        document.onmousemove = null
        document.onmouseup = null
      }
    },
    BackList() {
      clearInterval(this.Init)
      this.$router.push({
        path: '/exam_practice/CFA/questionbank',
        query: { cid: localStorage.getItem('upcateid') }
      })
    },
    select_topic(item, item_set, index, position) {
      let _this = this
      // item.user_index = index
      _this.nowposition = position

      if (item.user_index == index) {
        // item.user_index = -1
        // item.user_answer = ''
      } else {
        item.user_index = index
        item.user_answer = index + 1
      }
    },

    editor_change(e) {
      // if (e.user_answer.length > 0) {
      //   e.is_true = 2
      // }
      console.log(3333, this.user_answer)
    },
    start() {
      this.Init = setInterval(this.timers, 1000)
    },
    timers(num) {
      if (num) {
        this.seconds = this.testTime
      }
      this.seconds++
      var second = this.seconds % 60
      var minute = parseInt(this.seconds / 60) % 60
      var hour = parseInt(this.seconds / 3600)
      this.timing = `${hour < 10 ? '0' + hour : hour}:
      ${minute < 10 ? '0' + minute : minute}:
      ${second < 10 ? '0' + second : second}`
    },
    tabs(it, i) {
      console.log('父级项')
      if (it.have_case) {
        it.show_child = !it.show_child
      } else {
        this.p_id = it.position
        this.change_class = false
        this.zoom_show = false
      }
    },
    inner_tab(it, index) {
      console.log('子级项')
      this.case_info = it.case_con
      this.p_id = it.position
      this.change_class = true
      this.zoom_show = true

      this.zoom = false
    },
    zoom_out() {
      this.zoom = !this.zoom
      this.change_class = !this.change_class
      this.zoom_show = true
    },
    close_err() {
      // 纠错
      this.correct_err_show = false
      this.error_form.correct_info = ''
      this.error_form.your_phone = ''
      this.error_form.err_choose = '0'
    },
    //纠错 /-确认
    submit_err() {
      if (!this.error_form.correct_info) {
        this.$message.warning('请输入意见或建议')
        return -1
      }
      const err_data = {
        tid: this.tid,
        type: this.error_form.err_choose,
        res: this.error_form.correct_info,
        mobile: this.error_form.your_phone
      }

      // getjiucuo(err_data).then((res) => {
      //   if (res.data.code == 1) {
      //     this.correct_err_show = false
      //     this.$message.success('提交成功')
      //   }
      // })
    },
    // 全网笔记/ 我的笔记
    get_notes(id) {
      this.addNote_show = false
      this.note_show = true
      if (id == 0) {
        this.show_mynote = true
      } else {
        this.show_mynote = false
      }
    },
    // 关闭
    close_addNote() {
      this.note_tit = ''
      this.note_text = ''
      this.filelist = []
      this.addNote_show = false
    },
    imgPreview(file) {
      this.wd_preview_img = file.url
      this.wd_preview_show = true
    },
    handleRemove(file) {
      this.filelist.pop()
    },
    upload_img(res) {
      this.filelist.push(res.file)
    },
    handleExceed() {
      this.$message.warning('最多上传三张图片！')
    },
    async collect() {
      let datas = {
        cid: this.topicarr[this.p_id].cid,
        tid: this.topicarr[this.p_id].tid
      }

      const { data: data } = await collection(datas)
      if (data.code == 1) {
        if (data.data.is_collection) {
          this.$message.success('收藏成功')
        } else {
          this.$message.success('取消收藏成功')
        }
        this.topicarr[this.p_id].is_collection =
          !this.topicarr[this.p_id].is_collection
      }
    },

    close_wd() {
      this.wd_tit = ''
      this.wd_info = ''
      this.filelist = []
      this.wd_show = false
    },

    // 我的提问/ 我的问答
    get_ask(id, is_open) {
      if (!is_open) {
        this.wd_show = false
        this.ask_show = true
      }
      this.ask_type = id
    },
    // 答疑保存
    submit_wd() {},

    // back按钮
    pageback() {
      console.log(this.p_id)
      if (this.p_id >= 1) {
        this.p_id--
      }
      if (this.p_id <= 0) {
        this.nowposition = 1
        this.$message.warning('没有上一题了')
        return false
      }
    },
    // next按钮
    nextpage() {
      if (this.p_id < this.topicarr.length - 1) {
        this.p_id++
      }
      if (this.p_id >= this.topicarr.length - 1) {
        this.nowposition = this.topicarr.length
        this.$message.warning('没有下一题了')
        return false
      }
      // if (this.test_case.length > 0 && this.test_case[this.p_id - 1].is_case) {
      //   this.change_class = true
      //   this.zoom_show = true
      //   if (this.zoom) {
      //     this.change_class = false
      //     return -1
      //   }
      //   this.zoom = false
      // } else {
      //   // 改
      //   this.change_class = false
      //   this.zoom_show = false
      // }
    },

    // 保存进度/保存
    saveRecord() {},
    // 保存进度/取消
    save_hide() {
      this.saveShow = false
    },
    // finishTest 完成
    submitTest() {
      this.$router.push({ name: 'CFAReport' })
      console.log(this.seconds)
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/index.scss';
@import '@/assets/styles/cfa_practice.scss';

.online_Tutorial {
  height: 100%;
  overflow-y: auto;
}

.btns_cont {
  display: flex;
  flex-wrap: wrap;
  margin: 10px;
  // justify-content: space-evenly;

  .el-button {
    position: relative;
    width: 110px;
    height: 26px;
    background-color: $color-green; // 题目按钮颜色
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    border: 0;
    outline: none;
    margin-bottom: 5px;
    margin-left: 0px;
  }

  .el-button::after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: -10px;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 12px solid transparent;
  }

  .el-button.active::after {
    border-left-color: #8cc63f;
  }

  .el-button.answered {
    background-color: #4d4c4d;
  }

  .el-button.active.answered::after {
    border-left-color: #4d4c4d;
  }

  .el-button.answered::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-top: 12px solid #ffffff;
    border-right: 12px solid transparent;
    background: #bac4cb;
    display: block;
    width: 0;
    height: 0;
  }
}

/* footer 底部区域 */
.footer {
  width: 100%;
  height: 60px;
  background-color: #3d505a;
  border-top: 4px solid $color-green;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 20px;

  .el-button--success:hover {
    opacity: 0.6;
  }

  .el-button {
    background-color: $color-green;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;

    ::v-deep i {
      font-size: 18px;
      font-weight: bold;
      vertical-align: middle;
    }
  }
}

/* finishTest 弹框*/
.common_dialog.finishTest .inner {
  height: 290px;
  width: 500px;
  padding: 0;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;

  .main_text {
    margin: 20px auto;
    text-align: center;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    img {
      width: 50px;
      height: 50px;
      margin-bottom: 20px;
    }
  }
  .btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 220px;
    margin: 40px auto 0;
    button {
      width: 100px;
      height: 40px;
      background: $color-green; // 完成按钮finish
      outline: none;
      border: 0;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      img {
        width: 25px;
        height: 25px;
        margin-right: 5px;
      }
      p {
        font-size: 16px;
        color: #ffffff;
      }
    }
  }
}

.centertitle {
  width: 100%;
  box-sizing: border-box;
  padding-left: 12px;
  height: 26px;
  line-height: 26px;
  background-color: $color-green; // tap标题

  p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
  }
}

.inner_btnbox .test_btn.have {
  position: relative;
}
.inner_btnbox.not_show_child .test_btn.have::before {
  transform: rotate(180deg);
  transition: all ease 0.5s;
}
.inner_btnbox .test_btn.have::before {
  content: '';
  width: 16px;
  height: 16px;
  background: url('@/assets/images/flag.png') no-repeat center;
  background-size: contain;
  position: absolute;
  top: 6px;
  right: 15px;
  transform: rotate(0);
  transition: all ease 0.5s;
}
</style>
